<template>
  <a-input
    v-model="value"
    placeholder="请选择"
    allow-clear
    readonly
    class="input-modal"
    @clear.stop="handerClear"
    @search="select"
  >
    <template #append>
      <div class="apppend-box" @click="select"><icon-more /></div>
    </template>
  </a-input>
  <modal
    v-if="visible"
    :width="'1000'"
    title="合同类型"
    @modal-close="modalClose"
    @handle-ok="handleOk"
  >
    <contract-tree ref="contractTreeRef" @selected="contractTreeSelect" />
  </modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { nextTick, ref, watch } from 'vue';
  import ContractTree from '@/views/purchase-order/purchase-order-preparation/com/contractTree.vue';
  import lodash from 'lodash';
  import modal from '@/common/components/search-modal/modal.vue';

  const props = defineProps({
    modelValue: {
      type: [String, Object],
    },
    /**
     * @param {string}
     * 回显值
     */
    labelValue: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits([
    'update:modelValue',
    'change',
    'handerClear',
    'select',
    'handleOk',
  ]);
  const visible = ref(false);
  const selectedRow: any = ref({});
  const value = ref('');
  watch(
    () => props.labelValue,
    () => {
      nextTick(() => {
        value.value = props.labelValue;
      });
    },
    { deep: true, immediate: true }
  );
  watch(
    () => props.modelValue,
    (n: any) => {
      if (!n) {
        value.value = n;
      }
    },
    { deep: true, immediate: true }
  );
  const select = () => {
    visible.value = true;
  };
  const handerClear = () => {
    emit('update:modelValue', null);
    emit('handerClear');
  };
  const modalClose = () => {
    visible.value = false;
  };
  const contractTreeSelect = (record: any) => {
    console.log(record);
    emit('select', record);
    selectedRow.value = record || {};
  };

  const handleOk = () => {
    emit('update:modelValue', selectedRow.value.id);
    emit('change');
    value.value = selectedRow.value.classifyName;
    emit('handleOk', lodash.cloneDeep(selectedRow.value));
  };
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }

  .apppend-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
  }
</style>
